
/**
 * @file usermanagement/edit.js
 *  用户信息编辑详情
 * @author chnejie
 */

import React, {Component,PropTypes} from 'react';
import {connect} from 'dva';
import {routerRedux,withRouter } from 'dva/router';
import { Form, Input,Breadcrumb,Card, Checkbox, Button, Row, Col } from 'antd';


import styles from './userEdit.less';

const FormItem = Form.Item;
const CheckboxGroup = Checkbox.Group;

let data_obj;
let value =[];
const FORM_ITEM_LAYOUT = {
	labelCol: {
		xl:{
			span:8
		},
		lg:{
			span:8
		},
		xs: {
			span: 4,
		},
		sm: {
			span: 4,
		},
	},
	wrapperCol: {
		xl:{
			span:8
		},
		lg:{
			span:8
		},
		sm: {
			span: 10,
		},
		xs: {
			span: 8,
		},
	},
};
const UserEdit = ({
		dispatch,
		accoutuser,
		location,
		form: {
			getFieldDecorator,
			validateFields,
			getFieldsValue },
	})=>{
	function handleSubmit(e) {
		e.preventDefault();
		validateFields((err, fieldsValue) => {
			console.log("fieldsValue>>>>",fieldsValue);
			if (err) {
				return;
			}
			const data = fieldsValue.Checkbox;
			const authorities = new Array();
			for(let i = 0;i < data.length;i++){
				authorities.push({"authority":data[i].toString()})
			}
			delete fieldsValue.Checkbox
			delete fieldsValue.createDate
			dispatch({
				type: 'accoutuser/saveUsrsEdit',
				payload: {
					...fieldsValue,
					authorities
				}
			})
		})
	}

	const { userlist,roleslist } = accoutuser;
	const username_param = location.search.split('=')[1];
	userlist.map((item)=>{
		if(decodeURI(username_param) == item.username){
			data_obj = item
		}
	})
	function onChange(checkedValues) {
		// checkedValues.map((item)=>{
		// 	value.push(item)
		// 	if(item == "ROLE_PRODUCTOWNER"){
		// 		checkedValues.push("ROLE_USER")
		// 	}
		// })
		console.log('checked = ', checkedValues);
		// console.log("checked ==",value);
	}
	function handleBacktrack(){
		dispatch(routerRedux.push({
			pathname:`/systemMgt/accountMgt/userMgt?name=${data_obj.username}`,
		}))
	}
	return (
		<div>
			<div className={styles.breaddiv}>
					<Breadcrumb separator=">">
						<Breadcrumb.Item className={styles.breadcr}>用户管理</Breadcrumb.Item>
						<Breadcrumb.Item>{`${data_obj.name}`}</Breadcrumb.Item>
					</Breadcrumb>
			</div>
			<div className="page-useredit-home content-inner" style={{ background: '#ECECEC', padding: '30px' }}>
				<Card>
					<Form onSubmit={handleSubmit} >
					<FormItem
						{...FORM_ITEM_LAYOUT}
						label="用户名"
					>
						{getFieldDecorator(
							'username',
							{
								initialValue: data_obj.username,
							},
						)(
							<Input disabled />,
						)}
					</FormItem>
					<FormItem
						{...FORM_ITEM_LAYOUT}
						label="姓名"
					>
						{getFieldDecorator(
							'name',
							{
								rules: [
									{ required: true, message: '请输入姓名!' },
								],
								initialValue: data_obj.name,
							},
						)(
							<Input/>,
							)}
					</FormItem>

					<FormItem
						{...FORM_ITEM_LAYOUT}
						label="联系方式"
					>
						{getFieldDecorator(
							'mobile',
							{
								rules: [
									{ whitespace: true, pattern: /^((0\d{2,3}-\d{7,8})|(1[23456789]\d{9}))$/, message: '格式错误!' },
									{ required: true, whitespace: true, message: '请输入联系方式!' },
								],
								initialValue: data_obj.mobile,
							},
						)(
							<Input />,
						)}
					</FormItem>
					<FormItem
						{...FORM_ITEM_LAYOUT}
						label="邮箱"
					>
						{getFieldDecorator(
							'email',
							{
								rules: [
									{ whitespace: true, pattern: /^(\w)+(\.\w+)*@(\w)+((\.\w{2,3}){1,3})$/ 	, message: '请输入正确邮箱地址!' },
									{ required: true, whitespace: true, message: '请输入邮箱地址!' },
								],
								initialValue: data_obj.email,
							},
						)(
							<Input />,
						)}
					</FormItem>

					<FormItem
						{...FORM_ITEM_LAYOUT}
						label="创建时间"
					>
						{getFieldDecorator(
							'createDate',
							{
								initialValue: data_obj.createDate,
							})(
								<Input disabled  />,
						)}
					</FormItem>
					<FormItem
					 {...FORM_ITEM_LAYOUT}
					 label="用户职能"
					>
						{getFieldDecorator('Checkbox', {
							initialValue: data_obj.authorities,
							rules: [
									{ required: true,  type: 'array' , message: '请选择用户职能!' },
								],
						})(
							<CheckboxGroup options={roleslist}  onChange={onChange} />
							)}
					</FormItem>

					<FormItem
						wrapperCol={{
							xl: { span: 13, offset: 8 },
							lg: { span: 13, offset: 8 },
							xs: { span: 8, offset: 4 },
							sm: { span: 6, offset: 7 },
						}}
					>
						<Row className={styles.buttonRow}>
							<Col span={6} push={5}>
								<Button type="primary" htmlType="submit" size="large" to="/"  >提交</Button>
							</Col>
							<Col span={6} push={5}>
								<Button type="primary" size="large" onClick={handleBacktrack} >取消</Button>
							</Col>
						</Row>
					</FormItem>
				</Form>
				</Card>
			</div>
		</div>
	)
}

UserEdit.propTypes = {
	form: PropTypes.object.isRequired,
}

export default connect(({accoutuser})=>({accoutuser}))(Form.create()(UserEdit))
